<?php $this->placeholder('grid-size')->set(12);?>
<?php $this->placeholder('container-class')->set('post_ad select_category')?>
<?php $this->headLink()->appendStylesheet(Ac_Util::getImageBaseUrl('/css/custom_post_ad.v-'.AC_VERSION.'.css'))?>
<?php //$this->headLink()->appendStylesheet(Ac_Util::getImageBaseUrl('/css/custom_post_ad.css'))?>
<?php $this->JQuery()->javascriptCaptureStart()?>
var level1 = level2 = "";

function reinit(ele) {
    level1 = level2 = "";
    $('#category2').addClass('hide').removeClass('show');
    $('#category2 ul').addClass('hide').removeClass('show');

    $('#category1 li').removeClass('selected');
    $('#category2 li').removeClass('selected');
    $('#bouya').addClass('hide');
    $('#bouya').hide();
    $('#confirm_category').attr('disabled', 'true');

}

function initEvent() {
$('.category1').hover(function() {
        if($(this).hasClass("disabled")) {
            return'';
        }
        reinit();
        var category1 = $(this).attr('val');
        $('#'+category1).addClass('show').removeClass('hide');
        $('#category2').addClass('show').removeClass('hide');
        $(this).addClass('selected');
        level1 = $(this).html();
        $('#error_category').hide();

        if ($('#category_continue_div').css('display') != 'none') {
            $('#category_continue_div').hide();
            $('#category_continue_btn').show();
        }

     });

     $('.category2').click(function() {
     	if($(this).hasClass('disabled')){
			return false;
		}
        var category2 = $(this).attr('val');
        level2 = $(this).html();

        if ($('#'+category2).length > 0) {
            $('#'+category2).addClass('show').removeClass('hide');
            $('#confirm_category').attr('disabled', 'true');
        } else {
            $('.cat_selected').removeClass('cat_selected');
            $(this).addClass('cat_selected');
            $('#confirm_category').removeAttr('disabled');
            $('#bouya').removeClass('hide');
            $('#bouya').show();

            var str = level1 + " > "+ level2;
        }

        if ($('#category_continue_div').css('display') != 'none') {
            $('#category_continue_div').hide();
            $('#category_continue_btn').show();
        }

        $(this).addClass('selected');
     });

     /*$('.category3').click(function() {
        if (!$(this).hasClass('disabled')) {           
            //indicate which one is selected
            $('.category_selected').removeClass('category_selected');
            $(this).addClass('category_selected');
            $('#confirm_category').removeAttr('disabled');
            $('#category3 li').removeClass('selected');
            $(this).addClass('selected');
            level3 = $(this).html();
            if ($('#category_continue_div').css('display') == 'none') {
                $('#bouya').show();
            }
            if ($('#category_continue_div').css('display') != 'none') {
                $('#category_continue_div').hide();
                $('#category_continue_btn').show();
            }
        }
        else {
            $('#category3 li').removeClass('selected');
            $('#category3 li').removeClass('category_selected');
            $('#category2 li').removeClass('selected');
            $('#category2 li').removeClass('category_selected');
            $('#bouya').hide();
        }
     });*/
}

$('document').ready(function(){
	$('.alert').hide();
    if ($('#selected_category_list li').length == 0){
        $('#categories_list').addClass('hide');        
    }
    else {
        $('#categories_list').removeClass('hide');
        $('#category_continue_btn').removeClass('hide');
    }

     initEvent();
     function removeLink(ele) {
        var ele = $(ele);
        $("#hidden_" + ele.attr("rel")).remove();
        $("#li_" + ele.attr("rel")).remove();
        //if we remove the category let's check again and re enable if we have to
        var l = $('#selected_category_list').find('.to_disable');
        if(l.length == 0) {
            $('#category1 li').removeClass('disabled');
            $('#category2 li').removeClass('disabled');
        }
        //Count number of categories
        if ($('#selected_category_list li').length == 0){
            $('#categories_list').addClass('hide');
        }
        $('#category_continue_div').hide();
        $('#text_not_vertical_1').removeClass('hide');
        $('#text_not_vertical_2').removeClass('hide');
        reinit();
        initEvent();
     }
     $(".remove_link").click(function() {
        //Count number of categories
        if ($('#selected_category_list li').length == 0){
            $('#categories_list').addClass('hide');
        }
        $('#category_continue_div').hide();
        reinit();
        removeLink($(this));
     });

     

     $('#category2').click(function () {
        var cat_selected = $($('.cat_selected')[0]);

        var selected = cat_selected.attr('val');
        var a = $(document.createElement("a"))
            .addClass("remove_link")
            .html("<?php echo $this->t('Remove')?>")
            .click(function() {
                removeLink($(this));
            })
            .attr("rel",selected);
        if (cat_selected.hasClass('to_disable')) {
            //This is a vertical
            a.addClass('to_disable');
            $('#category_continue_div').show();
            $('#category_continue_div').removeClass('hide');
            
            $('#text_not_vertical_1').addClass('hide');
            $('#text_not_vertical_2').addClass('hide');
            $('.alert').hide();
        }
        else {
            $('#category_continue_div').show();
            $('#category_continue_div').removeClass('hide');
            $('.alert').show();
        }

        $('#categories_list').removeClass('hide');

        $(document.createElement("li"))
            .attr("id", "li_"+selected)
            .html(level1 + " > "+ level2)
            .appendTo($('.selected_category_list'))
            .append('&nbsp;')
            .append(a);

        $(document.createElement("input"))
            .attr({ type: "hidden", name:"category[]", value:selected, "id":"hidden_"+selected})
            .appendTo($('.selected_category_list'));
		
		cat_selected.addClass('disabled');
		
        if (cat_selected.hasClass('to_disable')) {
            $('#category1 li').addClass('disabled');
            $('#category2 li').addClass('disabled');
        }
        else {
            $('.to_disable').addClass('disabled');
        }
        $('#bouya').hide();
        $('#bouya').addClass('hide');

        $('#category_continue_btn').hide();
        $('#category_continue_btn').addClass('hide');
     });

     $('#select_other_category').click(function () {        
        $('#category_continue_btn').show();
        $('#category_continue_div').hide();
        $('#category_continue_div').addClass('hide');
        reinit();
     });
});

<?php $this->JQuery()->javascriptCaptureEnd()?>
<?php $this->headStyle()->captureStart()?>
    #category_cnt {
    }

    #category1, #category2, #category3 {
        float:left;
        overflow:auto;
        /*height:300px;
        border-color:#CCCCCC;
        border-style:solid;
        border-width:1px 1px 1px 0px;*/
    }
    #category1 {
        border-width:1px;
        border-right:0;
    }

    .category1, .category2, .category3 {
        cursor:pointer;
    }
    .category_selected {
        /*color:#f00;*/
    }
    #category_continue {
        clear:both;
    }

    #category_cnt #categories ul {
        border:0;
        -moz-border-radius:0;
    }
    .disabled {
        color:#aaa !important;
        cursor:default !important;
    }
    .disabled:hover {
        background:#fff !important;
    }
    /*.select_category .form.box fieldset.category_selected {
		border-right:none;
		width:558px;
		padding:16px;
		margin-left:0px;
	}
    .select_category .form.box fieldset.category_selected .desc {
		margin-top:-12px;
		overflow:hidden;
		margin-left:-12px;
	}
	.select_category .form.box fieldset.category_selected li {
		-webkit-border-radius:10px 10px 0px 0px;
		-moz-border-radius:10px 10px 0px 0px;
		border-radius:8px ;
		background:#888;
		margin-top:12px;
		padding:6px 18px 6px 8px ;
		color:#fff;
		font-size:15px;
		position:relative;
		float:left;
		margin-left:12px;
	}
	
	.select_category .form.box fieldset.category_selected li a {
		-webkit-border-radius:10px 10px 0px 0px;
		-moz-border-radius:10px 10px 0px 0px;
		border-radius:12px;
		position:absolute;
		top:-6px;
		right:-6px;
		border:2px solid #fff;
		text-indent:-9999px;
		
		background:#f00 url(../images/icon_del.png) no-repeat center;
		-moz-box-shadow: 0px 1px 2px #88cccc;
	-webkit-box-shadow: 0px 1px 2px #88cccc;
	box-shadow: 0px 1px 2px #444;
		width:18px;
		height:18px;
		overflow:hidden;
		border:2px solid #fff;
	}
	
	.select_category .category_selected .alert {
	background:#f6f6f6;
	padding:8px 8px;
	clear:both;
	margin-top:12px;
		-webkit-border-radius:10px 10px 0px 0px;
		-moz-border-radius:10px 10px 0px 0px;
		border-radius:8px;
		float:left;
	}
	.select_category .cat_selected .alert em {
	font-weight:bold;
	}*/
<?php $this->headStyle()->captureEnd()?>
<?php
$has_customized = false;
foreach((array) $this->selected_category as $cat){
    foreach((array) $cat->getParentTree() as $p) {
        if(!empty($p->customization)) {
            $has_customized = true;
            break 2;
        }
    }
}
?>
<section class="main_section">
	
	
	<section class="nav">
		<h3>发布信息</h3>
		<ol>
			<li class="selected"><span>1</span><em>选择分类</em></li>
			<li><span>2</span><em>写新信息</em></li>
			<li><span>3</span><em>登入</em></li>
		</ol>
	</section>
	
	<section class="form box">
		<form id="category_continue" action="<?php echo $this->geturl('post-an-add-information', 'listing')?>" method="get">
			<fieldset class="category_list">          
				<legend>选择合适你宝贝的分类</legend>
				<div id="category">
					<div id="category1">
						<ul>
							<?php foreach($this->level1 as $cat):?>
                            <li val="<?php echo $cat->_id?>" class="category1 <?php echo $has_customized? 'disabled' : ''?> <?php echo !empty($cat->customization) ? 'to_disable' : ''?>"><?php echo $cat->name?></li>
                        <?php endforeach;?>
						</ul>
					</div>
					<div id="category2" class="hide">
						<?php
                        $first      = true;
                        $previousid = '';
                        ?>
                        <?php foreach($this->level2->sort(array("path.0"=>1, "pos"=>1)) as $cat):?>
                            <?php if ((string) $cat->path[0] != $previousid):?>
                                <?php if (!$first):?>
                                    </ul>
                                <?php endif;?>
                                <?php
                                $first      = false;
                                $previousid = (string) $cat->path[0];
                                ?>
                                <ul id="<?php echo $cat->path[0]?>" class="hide">
                            <?php endif;?>
                            <li val="<?php echo $cat->_id?>" class="category2 <?php echo $has_customized? 'disabled' : ''?> <?php echo !empty($cat->customization) ? 'to_disable' : ''?>" ><?php echo $cat->name?></li>
                        <?php endforeach;?>
					</div>
					<!--div id="category3" class="hide"> </div-->
				</div>
			</fieldset>
			<fieldset class="category_selected cat_selected">
				<legend>你选择的分类</legend>
				
				<div class="desc">
					<ul class="selected_category_list">
					<?php foreach((array) $this->selected_category as $cat):?>
                          <li id="li_<?php echo $cat->_id?>">
                              <input type="hidden" name="category[]" value="<?php echo $cat->_id?>" id="hidden_<?php echo $cat->_id?>">
                              <?php
                                $tmp = array();
                                foreach((array) $cat->getParentTree() as $p) {
                                    $tmp[] = $p->name;
                                }
                                echo implode(' &gt; ', $tmp);
                              ?>
                              <a class="remove_link" rel="<?php echo $cat->_id?>"><?php echo $this->t('Remove')?></a>
                          </li>
                      <?php endforeach;?>
					</ul>
				</div>      
				<div class="alert">
		            <p>你可以在左边选择<em>更多分类</em>，增加信息点击率。</p>
		        </div>
				<div class="action">            
					<div class="button em submit" style="display: block; ">
	              		<button>下一步</button>
	              	</div>
	            </div> 
			</fieldset>
		</form>
	</section>
</section>
<aside class="aside"> </aside>
